<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
  姓名案例     监听器使用
  1.  firstName
  2.  lastName
  3.  fullName   =  firstName +" "+ lastName

计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
-->
<div id="app">
    <p>firstName: {{firstName}}</p>
    <p>lastName: {{lastName}}</p>
<!--    <p>fullName: {{fullName}}</p>-->
    <p>{{ createNewFullName}}</p>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            firstName:"xiao",
            lastName:'ming',
            fullName:'xiao ming'
        },
        methods:{
            createFullName(){
                return this.firstName + " "+ this.lastName;
            }
        },
        watch:{  // 监听器   监听响应式数据的改变
            // firstName:function (newValue){
            //     this.fullName =newValue +" "+this.lastName;
            // },
            // lastName:function (newValue){
            //     this.fullName =this.firstName +" " +newValue;
            // }
        },
        computed:{
            createNewFullName(){
                return this.firstName + " "+this.lastName;
            }
        }
      })
</script>
</body>
</html>